import { SERVICES } from '@/common';
import { SettingOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Avatar, Form, Input, Tag } from 'antd';
import React from 'react';
import styles from './index.less';

const HomePage: React.FC = () => {
	const { initialState = {} } = useModel('@@initialState');

	const userInfo = React.useMemo(() => {
		return initialState.userInfo;
	}, [initialState]);

	return (
		<PageContainer ghost>
			<main className={styles.container}>
				<section className={styles.profile}>
					<div className={styles.profileBox}>
						<div className={styles.avatar}>
							<Avatar size={200} src={SERVICES + userInfo?.cover} />
						</div>
						<div className={styles.name}>{userInfo?.name}</div>
						<div className={styles.nickname}>{userInfo?.nickname}</div>
						<div className={styles.setting}>
							<span>
								<SettingOutlined />
							</span>
							<span
								onClick={() => {
									history.push('/detail/' + userInfo.id, userInfo.type || 'manager');
								}}
							>
								个人详情
							</span>
						</div>
					</div>
				</section>
				<section className={styles.detail}>
					<p style={{ fontSize: '16px' }}>个人详情：</p>
					<div className={styles.detailForm}>
						<Form
							initialValues={userInfo || {}}
							labelAlign="right"
							labelCol={{ span: 3 }}
							wrapperCol={{ offset: 1 }}
						>
							<Form.Item name="role" label="角色类型">
								{userInfo?.role === '0' ? (
									<Tag color="green">超级管理员</Tag>
								) : (
									<Tag color="cyan">普通管理员</Tag>
								)}
							</Form.Item>
							<Form.Item name="status" label="当前状态">
								{userInfo?.status === '1' ? (
									<Tag color="green">启用</Tag>
								) : (
									<Tag color="lime">禁用</Tag>
								)}
							</Form.Item>
							<Form.Item name="age" label="用户年龄">
								<Input bordered={false} disabled={true} placeholder="请完善资料" />
							</Form.Item>
							<Form.Item name="sex" label="用户性别">
								{userInfo?.sex === 'man' ? (
									<Tag color="skyblue">男</Tag>
								) : (
									<Tag color="pink">女</Tag>
								)}
							</Form.Item>
							<Form.Item name="province" label="所在省份">
								<Input bordered={false} disabled={true} />
							</Form.Item>
							<Form.Item name="city" label="所在城市">
								<Input bordered={false} disabled={true} />
							</Form.Item>
							<Form.Item name="phone" label="联系方式">
								<Input bordered={false} disabled={true} placeholder="请完善资料" />
							</Form.Item>
							<Form.Item name="description" label="个人简介">
								<Input.TextArea
									disabled={true}
									style={{ width: '300px' }}
									placeholder="当前暂无个人描述"
								/>
							</Form.Item>
						</Form>
					</div>
				</section>
			</main>
		</PageContainer>
	);
};

export default HomePage;
